<template>
  <div class="container">
    <div class="topCon">
      <el-row>
        <el-col class="topTitle">
          <h2>
            <i class="icon iconfont iconfanhui1" @click="goBackOne"></i>
            {{ (caseInfo.complainant || '--') + '的欠薪诉求' }}
          </h2>
          <ul class="topTitleInfo">
            <li>案件来源：{{ caseInfo.caseSource || '--' }}</li>
            <!-- <li>
               收件时间：{{ common.GMTFormat(caseInfo.createTime,true) }}</li> -->
            <li>收件时间：{{ caseInfo.receiveDate || '--' }}</li>
            <li>办理时限：{{ caseInfo.timeLimit || '--' }}</li>
          </ul>
        </el-col>
      </el-row>
    </div>

    <div class="mainCon">
      <el-row class="infoContent">
        <el-col :span="9" class="info infoLeft">
          <p class="title">欠薪诉求信息</p>
          <div class="infoTitle">
            <div class="text">诉求类型</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              @click="toEditType"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editType">
            <li class="infoListItem">
              是否重复诉求：{{ changeStringStyle(caseInfo.isRepeat) }}
            </li>
          </ul>
          <case-type
            v-if="editType"
            :childData="caseInfo"
            @callback="callbackCaseType"
          ></case-type>

          <div class="infoTitle">
            <div class="text">被投诉单位</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              @click="toEditDepartment"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editDepartment">
            <li class="infoListItem">
              单位名称： {{ changeStringStyle(caseInfo.complainedCompany) }}
            </li>
            <li class="infoListItem">
              行业： {{ changeStringStyle(caseInfo.industryName) }}
            </li>
          </ul>
          <case-department
            @callback="callbackDepartment"
            v-if="editDepartment"
            :childData="caseInfo"
          />

          <div class="infoTitle">
            <div class="text">反映人信息</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              @click="toEditPerson"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editPerson">
            <li class="infoListItem">
              投诉人姓名：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.complainant)
              }}</span>
            </li>
            <li class="infoListItem">
              联系方式：<span class="infoListItemInfo">{{
                changeStringStyle(caseInfo.linkTel)
              }}</span>
            </li>
          </ul>
          <case-person
            v-if="editPerson"
            @callback="callbackCasePerson"
            :childData="caseInfo"
          />

          <div class="infoTitle">
            <div class="text">欠薪诉求</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              @click="toEditResolve"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editResolve">
            <li class="infoListItem">
              投诉事由：{{ changeStringStyle(caseInfo.complaintReason) }}
            </li>
            <li class="infoListItem">
              涉及人数：{{ changeStringStyle(caseInfo.involvedNum) }}人
            </li>
            <li class="infoListItem">
              涉及金额：{{ changeStringStyle(caseInfo.money) }}元
            </li>
            <li class="infoListItem">
              案件简要：{{ changeStringStyle(caseInfo.caseBrief) }}
            </li>
          </ul>
          <case-resolve
            v-if="editResolve"
            @callback="callbackCaseResolve"
            :childData="caseInfo"
          />
        </el-col>

        <el-col :span="15" class="info infoRight">
          <div class="infoTitle">
            <div class="text">案件情况</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              @click="toEditBase"
              >编辑</el-link
            >
          </div>
          <el-row class="infoList" v-if="!editBase">
            <el-col :span="12" class="infoListItem">
              案件号：{{ changeStringStyle(caseInfo.caseId) }}
            </el-col>
            <el-col :span="12" class="infoListItem infoListItemRequired">
              接件单位：{{ changeStringStyle(caseInfo.receiveUnit) }}
            </el-col>
            <el-col :span="12" class="infoListItem infoListItemRequired">
              转办函序号：{{ changeStringStyle(caseInfo.transferNum) }}
            </el-col>
          </el-row>
          <case-base
            v-if="editBase"
            @callback="callbackCaseBase"
            :childData="caseInfo"
          />

          <div class="infoTitle">
            <div class="text">办理情况</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              @click="toEditOther"
              >编辑</el-link
            >
          </div>
          <el-row class="infoList" v-if="!editOther">
            <el-col :span="24" class="infoListItem">
              办理情况：{{ changeStringStyle(caseInfo.handleSituation) }}
            </el-col>
            <el-col :span="24" class="infoListItem infoListItemRequired">
              办结存档：{{ changeStringStyle(caseInfo.isArchive) }}
            </el-col>
            <el-col :span="24" class="infoListItem infoListItemRequired">
              备注：{{ changeStringStyle(caseInfo.remark) }}
            </el-col>
          </el-row>
          <case-other
            v-if="editOther"
            @callback="callbackCaseOther"
            :childData="caseInfo"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import caseType from './kmCaseTypeComp'
import caseDepartment from './kmCaseDepartment'
import casePerson from './kmCasePerson.vue'
import caseResolve from './kmCaseResolve.vue'
import caseBase from './kmCaseBase.vue'
import caseOther from './kmCaseOther.vue'
export default {
  name: 'kmCaseDetail',
  data() {
    return {
      id: '',
      type: '',
      caseInfo: {},
      isLoading: false,
      editFiled: false,
      editType: false,
      editDepartment: false,
      editPerson: false,
      editBase: false,
      editOther: false,
      editDate: false,
      editResolve: false,
      showTask: false,
      showPerson: false,
      progressContent: '',
      appealProgressList: [],
      isShowUpdate: false,
    }
  },
  components: {
    caseType,
    caseDepartment,
    casePerson,
    caseResolve,
    caseBase,
    caseOther,
  },
  mounted() {
    this.id = this.$route.query.id
    this.getCaseDetail(this.id)
  },
  computed: {
    resolveStatus() {
      if (this.caseInfo.isFinish == 'YES') {
        return '已办结'
      } else {
        return '否'
      }
    },
  },
  methods: {
    changeStringStyle(str) {
      if (str == '--' || str == '' || str == null || str == undefined) {
        return '- -'
      } else {
        return str
      }
    },
    /**
     * @name: 获取欠薪投诉详情
     * @param {string} id
     * @Author: 471826078@qq.com
     */
    getCaseDetail(id) {
      this.axios
        .post('api-r/complaint/registration/detail', { id })
        .then((res) => {
          if (!res.data.hasError) {
            this.caseInfo = res.data.result
            // this.getAppealProgressList(id)
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
    goBackOne() {
      this.$router.push('/home/kMCaseComplaint/otherComplaintsTab')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/kMCaseComplaint/otherComplaintsTab',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @name: 编辑诉求类型
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditType() {
      this.editType = true
    },
    callbackCaseType(val) {
      this.editType = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**编辑投诉单位
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditDepartment() {
      this.editDepartment = true
    },
    callbackDepartment(val) {
      this.editDepartment = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    /**
     * @name:
     * @param {*}
     * @Author: 471826078@qq.com
     */
    toEditPerson() {
      this.editPerson = true
    },
    callbackCasePerson(val) {
      this.editPerson = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    // toEditResolve
    toEditResolve() {
      this.editResolve = true
    },
    callbackCaseResolve(val) {
      this.editResolve = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditBase() {
      this.editBase = true
    },
    callbackCaseBase(val) {
      this.editBase = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditOther() {
      this.editOther = true
    },
    callbackCaseOther(val) {
      this.editOther = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.topTitle {
  // background: #e4ebf1;
  height: 90px;
  padding: 15px 24px;
  position: relative;
  border-bottom: 1px solid #e3e7e9;
  h2 {
    vertical-align: middle;
    font: bold 18px Microsoft YaHei;
    color: #333333;
    .iconfanhui1 {
      font-size: 20px;
      margin-right: 6px;
      cursor: pointer;
    }
    span {
      font-weight: normal;
      display: inline-block;
      padding: 0 6px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      margin-left: 12px;
    }
    .during {
      background: #ffac37;
    }
    .finished {
      background: #009588;
    }
    .actioning {
      background: #0f76c4;
    }
    .reRecord {
      background: #999;
    }
    .reRecordTip {
      font-size: 14px;
      color: #666666;
      width: auto;
    }
  }
  &Info {
    line-height: 14px;
    font-size: 14px;
    margin-top: 10px;
    color: #666666;
    li {
      display: inline-block;
      margin-right: 30px;
      position: relative;
      // padding-left: 20px;
      // &::before {
      //   content: "";
      //   position: absolute;
      //   width: 6px;
      //   height: 6px;
      //   border-radius: 50%;
      //   background-color: #009588;
      //   top: 4px;
      //   left: 0;
      // }
    }
  }
  .btn {
    position: absolute;
    top: 26px;
    right: 24px;
    width: 136px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #009588 !important;
    border-radius: 21px;
    font-size: 14px;
    color: #009588 !important;
    text-align: center;
    background: #e4ebf1;
    padding: 0;
  }
  .btn:hover {
    background: rgba(0, 149, 136, 0.1) !important;
  }
  .dateShow {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 240px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #009588;
    text-align: center;
    padding: 0;
  }
}
// .topCon {
//   margin: 24px;
// }
.mainCon {
  top: 230px;
  padding: 0;
}
.infoLeft {
  padding-top: 24px;
  padding-bottom: 24px;
  padding-right: 24px;
  border-right: 10px solid #f5f7fa;

  padding-left: 24px;
  .title {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
}
.infoRight {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  .title {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
  &::before {
    content: '';
    width: 10px;
    background-color: #f5f7fa;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
  }
}
.info {
  background-color: #fff;
  height: calc(100%);
  &TopTip {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    background-color: #fffbe6;
    // color: red;
    font-size: 14px;
    position: relative;
    &::before {
      width: 24px;
      height: 30px;
      content: '';
      background-color: #fffbe6;
      position: absolute;
      top: 0;
      left: -24px;
    }
    &::after {
      width: 24px;
      height: 30px;
      content: '';
      background-color: #fffbe6;
      position: absolute;
      top: 0;
      right: -24px;
    }
    .el-icon-warning {
      vertical-align: middle;
    }
  }
  &Title {
    height: 35px;
    line-height: 35px;
    margin-top: 20px;
    position: relative;
    .edit {
      position: absolute;
      right: 15px;
      top: 0px;
      height: 20px;
    }
    .edit1 {
      margin-left: 15px;
      padding: 5px 10px;
    }
    .text {
      display: inline-block;
      color: #333;
      line-height: 20px;
      height: 20px;
      border-left: 4px solid #009588;
      padding-left: 15px;
      font: bold 16px Microsoft YaHei;
    }
  }
  &List {
    padding: 5px 0;
    &Item {
      padding-left: 15px;
      line-height: 30px;
      font-size: 14px;
      color: #333;

      /deep/.el-link {
        height: 30px;
        vertical-align: top;
        &--inner {
          height: 26px !important;
          line-height: 26px;
        }
      }
    }
    // 修改步骤条样式
    /deep/ .el-steps {
      .el-step__icon.is-text {
        border: none;
        background-color: #eee;
        border-radius: 50%;
        width: 10px;
        height: 10px;
      }
      .el-step__icon-inner {
        display: none;
      }
      .el-step__line {
        background-color: #eee;
        left: 4px !important;
        top: 9px !important;
        bottom: -8px !important;
      }
      .el-step__title {
        font-size: 12px;
        color: #999;
      }
      .el-step__description {
        margin-bottom: 15px;
        font-size: 14px;
        color: #444;
      }
    }
    .infoListTitles {
      font-size: 14px;
      color: #999;
    }
    .infoListInput {
      margin: 15px 0;
    }
  }
}
.noDataTip {
  line-height: 26px;
  font-size: 14px;
  color: #666;
}
.commonBut {
  width: 90px !important;
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.green {
  background: rgb(4, 151, 138);
}
.yellow {
  background: rgb(246, 155, 34);
}
.red {
  background: rgb(218, 4, 29);
}

.topTitleInfo {
  padding-left: 30px;
}
</style>
